<template>
    <div>
      <div class="countItem">
        <div class="itemIcon">
          <i class="iconfont icon-jianlidanwei"></i>
        </div>
        <div class="itemInfo">
          <div>
            <div class="infoNum">
              <div class="num">{{toThousand(keyAttendance.targetNum)}}</div>
              <div class="rate ">
                <span class="safe" v-if="keyAttendance.rate > 0"><i class="iconfont icon-jianyoushang " ></i>{{(Math.abs(keyAttendance.rate)).toFixed(1)}}%</span>
                <span class="warning"  v-if="keyAttendance.rate < 0"><i class="iconfont icon-jianyouxia "></i>{{(Math.abs(keyAttendance.rate)).toFixed(1)}}%</span>
              </div>
            </div>
            <div class="infoDes">
              <div>管理人员进场</div>
            </div>
          </div>
        </div>
      </div>
      <div class="countItem">
        <div class="itemIcon">
          <i class="iconfont icon-gongren1"></i>
        </div>
        <div class="itemInfo">
          <div>
            <div class="infoNum">
              <div class="num">{{toThousand(laborAttendance.targetNum)}}</div>
              <div class="rate ">
                <span class="safe" v-if="laborAttendance.rate > 0"><i class="iconfont icon-jianyoushang "></i>{{(Math.abs(laborAttendance.rate)).toFixed(1)}}%</span>
                <span class="warning" v-if="laborAttendance.rate < 0"><i class="iconfont icon-jianyouxia "></i>{{(Math.abs(laborAttendance.rate)).toFixed(1)}}%</span>
              </div>
            </div>
            <div class="infoDes">
              <div>劳务工人进场</div>
            </div>
          </div>
        </div>
      </div>
      <div class="countItem">
        <div class="itemIcon">
          <i class="iconfont icon-tadiao"></i>
        </div>
        <div class="itemInfo">
          <div>
            <div class="infoNum">
              <div class="num">{{toThousand(towercraneInfo.targetNum)}}</div>
              <div class="rate ">
                <span class="safe" v-if="towercraneInfo.rate > 0"><i class="iconfont icon-jianyoushang "></i>{{(Math.abs(towercraneInfo.rate)).toFixed(1)}}%</span>
                <span class="warning" v-if="towercraneInfo.rate < 0"><i class="iconfont icon-jianyouxia "></i>{{(Math.abs(towercraneInfo.rate)).toFixed(1)}}%</span>
              </div>
            </div>
            <div class="infoDes">
              <div>在线塔吊</div>
            </div>
          </div>
        </div>
      </div>
      <div class="countItem">
        <div class="itemIcon">
          <i class="iconfont icon-juxingkaobei"></i>
        </div>
        <div class="itemInfo">
          <div>
            <div class="infoNum">
              <div class="num">{{toThousand(elevatorInfo.targetNum)}}</div>
              <div class="rate ">
                <span class="safe" v-if="elevatorInfo.rate > 0"><i class="iconfont icon-jianyoushang "></i>{{(Math.abs(elevatorInfo.rate)).toFixed(1)}}%</span>
                <span class="warning" v-if="elevatorInfo.rate < 0"><i class="iconfont icon-jianyouxia "></i>{{(Math.abs(elevatorInfo.rate)).toFixed(1)}}%</span>
              </div>
            </div>
            <div class="infoDes">
              <div>升降机在线</div>
            </div>
          </div>
        </div>
      </div>
      <div class="countItem">
        <div class="itemIcon">
          <i class="iconfont icon-jiankong1"></i>
        </div>
        <div class="itemInfo">
          <div>
            <div class="infoNum">
              <div class="num">{{toThousand(videoCamerasInfo.targetNum)}}</div>
              <div class="rate ">
                <span class="safe" v-if="videoCamerasInfo.rate > 0"><i class="iconfont icon-jianyoushang "></i>{{(Math.abs(videoCamerasInfo.rate)).toFixed(1)}}%</span>
                <span class="warning" v-if="videoCamerasInfo.rate < 0"><i class="iconfont icon-jianyouxia "></i>{{(Math.abs(videoCamerasInfo.rate)).toFixed(1)}}%</span>
              </div>
            </div>
            <div class="infoDes">
              <div>监控在线</div>
            </div>
          </div>
        </div>
      </div>
      <div class="countItem">
        <div class="itemIcon">
          <i class="iconfont icon-tixing"></i>
        </div>
        <div class="itemInfo">
          <div>
            <div class="infoNum">
              <div class="num earlyWarning">{{toThousand(alarmInfo.targetNum)}}</div>
              <div class="rate ">
                <span class="warning" v-if="alarmInfo.rate > 0"><i class="iconfont icon-jianyoushang "></i>{{(Math.abs(alarmInfo.rate)).toFixed(1)}}%</span>
                <span class="safe" v-if="alarmInfo.rate < 0"><i class="iconfont icon-jianyouxia "></i>{{(Math.abs(alarmInfo.rate)).toFixed(1)}}%</span>
              </div>
            </div>
            <div class="infoDes">
              <div>预警报警</div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    import { mapGetters } from 'vuex'
    export default {
      name: 'countData',
      data () {
        return {
          alarmInfo: {
            targetNum: 0
          },
          elevatorInfo: {
            targetNum: 0
          },
          keyAttendance: {
            targetNum: 0
          },
          laborAttendance: {
            targetNum: 0
          },
          towercraneInfo: {
            targetNum: 0
          },
          videoCamerasInfo: {
            targetNum: 0
          }
        }
      },
      watch: {
        // 1 是视频推送
        // 2 是塔吊推送
        // 3 是报警推送
        // 4 是升降机推送
        // 5 是管理人员推送
        // 6 是劳务人员推送
        'incomingCompanyBroadcastNode.videoCamerasInfo' (newValue) {
          this.postDataEmit(1)
          this.videoCamerasInfo.rate = ((newValue - this.videoCamerasInfo.yesterdayNum) / this.videoCamerasInfo.yesterdayNum).toFixed(1)
          if (this.videoCamerasInfo.yesterdayNum === 0 || this.videoCamerasInfo.yesterdayNum === null) {
            this.videoCamerasInfo.rate = 0
          }
          this.videoCamerasInfo.targetNum = newValue
        },
        'incomingCompanyBroadcastNode.towercraneInfo' (newValue) {
          this.postDataEmit(2)
          this.towercraneInfo.rate = ((newValue - this.towercraneInfo.yesterdayNum) / this.towercraneInfo.yesterdayNum).toFixed(1)
          if (this.towercraneInfo.yesterdayNum === 0 || this.towercraneInfo.yesterdayNum === null) {
            this.towercraneInfo.rate = 0
          }
          this.towercraneInfo.targetNum = newValue
        },
        'incomingCompanyBroadcastNode.alarmInfo' (newValue) {
          this.postDataEmit(3)
          this.alarmInfo.rate = ((newValue - this.alarmInfo.yesterdayNum) / this.alarmInfo.yesterdayNum).toFixed(1)
          if (this.alarmInfo.yesterdayNum === 0 || this.alarmInfo.yesterdayNum === null) {
            this.alarmInfo.rate = 0
          }
          this.alarmInfo.targetNum = newValue
        },
        'incomingCompanyBroadcastNode.elevatorInfo' (newValue) {
          this.postDataEmit(4)
          this.elevatorInfo.rate = ((newValue - this.elevatorInfo.yesterdayNum) / this.elevatorInfo.yesterdayNum).toFixed(1)
          if (this.elevatorInfo.yesterdayNum === 0 || this.elevatorInfo.yesterdayNum === null) {
            this.elevatorInfo.rate = 0
          }
          this.elevatorInfo.targetNum = newValue
        },
        'incomingCompanyBroadcastNode.keyAttendance' (newValue) {
          this.postDataEmit(5)
          this.keyAttendance.rate = ((newValue - this.keyAttendance.yesterdayNum) / this.keyAttendance.yesterdayNum).toFixed(1)
          if (this.keyAttendance.yesterdayNum === 0 || this.keyAttendance.yesterdayNum === null) {
            this.keyAttendance.rate = 0
          }
          this.keyAttendance.targetNum = newValue
        },
        'incomingCompanyBroadcastNode.laborAttendance' (newValue) {
          this.postDataEmit(6)
          this.laborAttendance.rate = ((newValue - this.laborAttendance.yesterdayNum) / this.laborAttendance.yesterdayNum).toFixed(1)
          if (this.laborAttendance.yesterdayNum === 0 || this.laborAttendance.yesterdayNum === null) {
            this.laborAttendance.rate = 0
          }
          this.laborAttendance.targetNum = newValue
        },
        currentUser () {
          if (this.currentUser.companyAdmin) {
            this.getTargetInfo()
          }
        }
      },
      mounted () {
        this.getTargetInfo()
      },
      computed: {
        ...mapGetters({
          incomingCompanyBroadcastNode: 'incomingCompanyBroadcastNode',
          currentUser: 'currentUser'
        })
      },
      methods: {
        toThousand (num) {
          return this.$toThousands(num)
        },
        getTargetInfo () {
          let data = {
            mid: this.currentUser.mid,
            coId: this.currentUser.coId,
            code: this.currentUser.code
          }
          this.$axios({
            method: 'post',
            url: `${this.$site.videoServer}/api/companyScreen/getTargetInfo`,
            data: this.$qs.stringify(data)
          }).then(res => {
            console.log(res)
            if (res.data.success) {
              let data = res.data.data
              this.alarmInfo = data.alarmInfo || {targetNum: 0, yesterdayNum: 0}
              this.elevatorInfo = data.elevatorInfo || {targetNum: 0, yesterdayNum: 0}
              this.keyAttendance = data.keyAttendance || {targetNum: 0, yesterdayNum: 0}
              this.laborAttendance = data.laborAttendance || {targetNum: 0, yesterdayNum: 0}
              this.towercraneInfo = data.towercraneInfo || {targetNum: 0, yesterdayNum: 0}
              this.videoCamerasInfo = data.videoCamerasInfo || {targetNum: 0, yesterdayNum: 0}
            } else {
              this.$message.error(res.data.errorMsg)
            }
          })
        },
        postDataEmit (type) {
          this.$emit('dataEmit', type)
        }
      }
    }
</script>

<style scoped lang="scss">
  .countItem {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    .itemIcon {
      margin-right: 10px;
      > i {
        font-size: 44px;
      }
    }
    .itemInfo {
      .infoNum {
        white-space:nowrap;
        font-size:24px;
        font-weight:bold;
        color:rgba(242,242,242,1);
        > div {
          display: inline-block;
          &.earlyWarning {
            color: #ffc600;
          }
          &.rate {
            vertical-align: top;
            font-size:14px;
            .safe {
              color: #00ff57;
            }
            .warning {
              color: #e74646;
            }
          }
        }
      }
      .infoDes {
        margin-top: 5px;
        font-size:14px;
        font-weight:400;
        color:rgba(169,197,236,1);
      }
    }
  }
</style>
